<template>
  <div>
    <vue2-ace-editor
      :value="value"
      lang="python"
      theme="github"
      :options="editorOptions"
      @init="editorInit"
      @input="onInput"
      style="height: 300px; width: 100%;"
    />
  </div>
</template>

<script>
import Vue2AceEditor from 'vue2-ace-editor';
import 'brace/ext/language_tools'; // 加载语言工具扩展
import 'brace/mode/python'; // 加载Python模式
import 'brace/theme/github'; // 加载GitHub主题

export default {
  components: {
    Vue2AceEditor,
  },
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      editorOptions: {
        enableBasicAutocompletion: true, // 启用基本自动补全
        enableLiveAutocompletion: true, // 启用实时自动补全
        enableSnippets: true, // 启用代码片段
        showLineNumbers: true, // 显示行号
        tabSize: 4, // Tab缩进大小
        mode: "ace/mode/python", // 设置Python模式
        theme: "ace/theme/github", // 设置GitHub主题
        fontSize: 14
      },
    };
  },
  methods: {
    editorInit(editor) {
      // 初始化时配置 Ace Editor
      require('brace/ext/language_tools'); // 加载语言工具扩展
      require('brace/mode/python'); // 加载Python模式
      require('brace/theme/github'); // 加载GitHub主题

      // 设置初始值
      editor.setValue(this.value, -1); // -1 表示不滚动到顶部
    },
    onInput(newValue) {
      this.$emit('input', newValue);
    },
  },
};
</script>

<style scoped>
/* 你可以根据需要调整样式 */
</style>
